<!-- 异常提醒页面 -->
<template>
  <el-card class="box-card" style="height: 100%">
    <template #header>
      <div class="abnormal_header">
        <div>
          <img src="/src/assets/abnormal.png" class="abnormal_logo"/>
        </div>
        <div class="message">
          <span style="font-weight: bold; font-size: 20px;">每日异常提醒</span>
        </div>
      </div>
    </template>
    <div class="abnormal_message">
      <div v-for="(personal, index) in personals" :key="index" class="personal">
        <div class="personal_info">
          <div class="personal_detail">
            <p style="font-size: 14px;color:#81838F">{{ personal.name }} | {{ personal.sex }} | {{ personal.age }} 岁 </p>
          </div>
          <div class="personal_icons">
            <img v-if="personal.ill.includes('心率')" src="/src/assets/heart_rate.png" class="heart_logo"/>
            <img v-else-if="personal.ill.includes('高压')" src="/src/assets/high_pressure.png" class="pressure_logo"/>
          </div>
          <div class="personal_ill">
            <p style="font-size: 14px;color:#81838F">{{ personal.ill }}</p>
          </div>
        </div>
        <div class="ill_info">
          <p>{{ personal.abnormality }}</p>
          <p>持续时间：{{ personal.duration }}</p>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useDoctorInfo } from '/@/stores/doctorInfo';
import { persureHeartRatetoday } from '/@/api/patient_doctor/patient_doctor';



interface PersonalInfo {
  duration: string;
  sex: string;
  name: string;
  abnormality: string;
  ill: string;
  age: number;
}

const personals = ref<PersonalInfo[]>([]);


const state = useDoctorInfo();
const Uid = state.doctorBaseInfo.doctorUid;
const fetchpersureHeartRatetoday = async (Uid:string) => {
  try {
    const response = await persureHeartRatetoday(Uid);
    /* console.log(response); */
    if (Array.isArray(response.data)) {
      personals.value = response.data.map(item => ({
        duration: item.duration,
        sex: item.sex,
        name: item.name,
        abnormality: item.abnormality,
        age: item.age,
        ill: item.ill,
      }));
    } else {
      console.error('Unexpected data format:', response.data);
    }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchpersureHeartRatetoday(Uid);
});

onActivated(() => {
  fetchpersureHeartRatetoday(Uid);
});

</script>

<style>
.abnormal_header {
  display: flex;
  align-items: center;
}

.abnormal_logo {
  margin-right: 10px;
  width: 40px;
  height: auto;
}

.abnormal_message {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-top:-5px;
}

/* 隐藏垂直滚动条 */
.abnormal_message::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.personal{
  margin-top:5px;
}

.personal_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.personal_detail, .personal_icons, .personal_ill {
  display: flex;
  align-items: center;
}

.personal_detail {
  flex: 1;
}

.personal_icons {
  margin: 0 10px;
}

.heart_logo, .pressure_logo {
  width: 25px;
  height: auto;
}
.ill_info{
  margin-top:2.5px;
}
</style>
